<template>
  <transition name="fade">
    <div v-if="visible" class="custom-loading-container">
      <div class="custom-loading-content">
        <svg class="circular" viewBox="0 0 50 50">
          <circle class="path" cx="25" cy="25" r="20" fill="none"/>
        </svg>
        <p class="custom-loading-text">{{ text }}</p>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const text = ref('Loading...')

const show = (loadingText = 'Loading...') => {
  text.value = loadingText
  visible.value = true
}

const hide = () => {
  visible.value = false
}

defineExpose({ show, hide })
</script>

<style scoped>
.custom-loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none; /* 允许点击下方内容 */
  z-index: 2000;
}

.custom-loading-content {
  background: rgba(0, 0, 0, 0.7);
  padding: 15px 20px 5px 20px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto; /* 加载区域可以点击 */
}

.circular {
  width: 40px;
  height: 40px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
}

.custom-loading-text {
  margin-top: 10px;
  color: #ffffff;
  font-size: 16px;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}
</style>